<!DOCTYPE html PUBLIC "">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>按钮</title>
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">

</head>
<body>
<span>---------------纯样式控制---------------</span>

<p>
    <button type="button" class="button">button</button>
    <button type="submit" class="button button_submit">button_submit</button>
    <button type="reset" class="button button_danger">button_danger</button>
    <button type="button" class="button button_cancel">button_cancel</button>
    <button type="button" class="button button_success">button_success</button>
    <button type="button" class="button button_warning">button_warning</button>
    <button type="button" class="button button_primary">button_primary</button>
    <button type="button" class="button button_disabled" disabled="disabled">button_disabled</button>
    <a id="alink" >aButton</a>
</p>
<span>---------------JS控制--------------</span>

<p>
    被控制的按钮：
    <button type="button" id="btnOK"></button>
    <button type="button" id="btnCanel" ui-config="{
        label:'在属性中写配置',
        icons:{left:'icon_add'},
        disabled: false,
        style: 'primary'
    }"></button>
</p>
<p>提供的方法：
    <button type="button" id="btnConfig">获取按钮配置项</button>
    |
    <button type="button" id="btnStyle">设置样式</button>
    |
    <button type="button" id="btnEnable">设置可用</button>
    |
    <button type="button" id="btnDisable">设置不可用</button>
    |
    <button type="button" id="btnGetText">获取按钮文本</button>
    |
    <input id="txtName" type="text" value="取消"/>
    <button type="button" id="btnSetText">设置按钮文本</button>
    |
    <button type="button" id="btnSetLeft">设置左图标</button>
    <button type="button" id="btnSetRight">设置右图标</button>
</p>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    $(function () {
        $('#alink').uiButton({
            style:' button_submit',
            icons:{left:'icon_edit'}
        });
        btn = $('#btnOK').uiButton({
            label:'JS控制的按钮',
            icons:{left:'icon_edit'},
            disabled: false,
            style: 'button_submit',
            onClick: click
        });
        $('#btnCanel').uiButton();
        $('#btnConfig').uiButton({
            onClick: function(){alert(JSON.stringify(btn.uiButton('options')));}
        });
        $('#btnStyle').uiButton({
            onClick: function(){btn.uiButton('setStyle','button_success');}
        });
        $('#btnEnable').uiButton({
            onClick: function(){setEnable(true);}
        });
        $('#btnDisable').uiButton({
            onClick: function(){setEnable(false);}
        });
        $('#btnGetText').uiButton({
            onClick: function(){alert(btn.uiButton('getLabel'));}
        });
        $('#btnSetText').uiButton({
            onClick: function(){btn.uiButton('setLabel',$('#txtName').val());}
        });
        $('#btnSetLeft').uiButton({
            onClick: function(){btn.uiButton('setIcons',{left:'icon_add'});}
        });
        $('#btnSetRight').uiButton({
            onClick: function(){btn.uiButton('setIcons',{right:'icon_delete'});}
        });
    });
    function setEnable(enable) {
        if (enable)
            btn.uiButton('enable');
        else
            btn.uiButton('disable');
    }
    function click() {
        alert('JS配置事件');
    }
</script>
</html>